<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui">
    <script src="./html2canvas.js"></script>
    <title>Document</title>
</head>
<style>
	*{
		margin:0;
		padding:0;
	}
	.body {
		margin-top: 10px;
	}
	#bigImage{
		position:relative;
		width: 1280px;
        height:828.23px;
		/* background:red; */
		background:url('http://amplifi-academy-dev.oss-cn-hangzhou.aliyuncs.com/a_project_file/Tempfiles/2022/1/22-01-25_16-40-58-0241691_3497.jpg?Expires=1644310100&OSSAccessKeyId=LTAI5tNm2dr647ufzNe64os3&Signature=pr%2BA6uW8O9YXZaGVebmXdhIE3ww%3D') no-repeat;
		/* background-size:100% 100%; */
	}
		#bigImage .content {
			background: #fff;
			width: 908px;
			height: 327px;
			position: absolute;
			top: 401px;
			left: 186px;
			color: #4c4c4c;
		}
			#bigImage .content > div.one {
				font-weight: bold;
				font-size: 19px;
				text-align: center;
			}
				#bigImage .content > div.one p {
					margin-top: 18px;
				}

			#bigImage .content > div.two {
				font-weight: bold;
				font-size: 19px;
				text-align: center;
				margin-top: 50px;
				line-height: 43px;
				/*word-break: break-all;*/
			}

			#bigImage .content > div.three {
				font-weight: bold;
				font-size: 17px;
				text-align: center;
				margin-top: 60px;
				display: flex;
				justify-content: space-between;
			}
</style>
<body>
	<div style=" width: 1280px;margin: 0 auto" id="bigImage">
		<div >
			<div class="content">
				<div class="one SCMedium">
					<p>恭喜您，张丽莎(Amplifi / Lisa.Zhang@dentsu.com) !</p>
					<p>
						在2021年10月28日完成考试―搜索广告效果工具及模拟实操，成绩合格。
					</p>
				</div>
				<div class="two SCMedium">
					<p>This is to certify That Lisa Zhang (Amplifil Lisa.Zhang@dentsu.com) has successfully completed the exam - Search advertising effect tools and simulation practice on Oct.28,2021.</p>
				</div>
				<div  class="three SCMedium">
					<div>证书编号:dentsu-amplifi-academy-00001</div>
					<div>Amplifi Academy</div>
				</div>
			</div>
		</div>
	</div>
	<div>
		<img id="img" alt="">
	</div>

	

</body>
<script>
  //  let that = this
	let domObj = document.getElementById('bigImage')
	domObj.style.display = 'none'
	html2canvas(domObj, {
	  useCORS: true,
	  allowTaint: false,
	  logging: false,
	  letterRendering: true,
	  onclone (doc) {
	    let e = doc.querySelector('#bigImage')
	    e.style.display = 'block'
	  }
	}).then(canvas => {
		domObj.style.display = 'none'
		document.getElementById('img').src = canvas.toDataURL('image/png')
		//document.getElementById('downloadimg').href = canvas.toDataURL('image/png')
	})
</script>
</html>